import { createBrowserRouter, Link, Navigate } from "react-router-dom";
import App from '../App.tsx';
function ReactDom() {
    return <>
        <h2>欢迎学习react课程2 </h2>
        <Link to="/vite"><button>返回到Vite页面</button></Link>
        <Link to="/"><button>返回到首页方法一</button></Link>
        <Link to=".."><button>返回到首页方法二</button></Link>
    </>
}

function Vite() {
    return <>
        <h2>欢迎学习vite课程2</h2>
    </>
}


function Test() {
    return <>
        {/* Navigate 在组件中使用的第二种方式 */}
        <h1>这是Test组件2 <Navigate to="/"></Navigate></h1>
    </>
}

// 404 页面
function NotFound() {
    return <>
        <h1>404 页面不存在</h1>
        <Link to="/">
            <button>返回</button>
        </Link>
    </>
}


    // 使用 createBrowserRouter 直接创建路由
    const router = createBrowserRouter([
        {
            path: "/",
            element: <App />,
        },
        {
            path: "/vite",
            element: <Vite />,
        },
        {
            path: "/react",
            element: <ReactDom />,
        },
        {
            path: "/test",
            element: <Test />,
        },
        {
            path: "*",
            element: <NotFound />,
        }
    ])

export default router